<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    class App extends React.Component{
        name='张三'
        age='18'
        sex="男"
        constructor(){
            // 必须先调用
            super()
            // 绑定this执行
            this.getAge = this.getAge.bind(this);
        }
        // 必须要有一个渲染方法；
        render(){
            console.log(this)
            return (
                <div>
                    <h1 className='red'>我是class类组件创建的组件</h1>  
                    <h2>{this.name}----{this.sex}----{this.age}</h2> 
                    <h3>{this.say()}</h3>
                    {
                        //绑定事件
                    }
                    <button onClick={()=>{
                        // 箭头函数没有this指向所以 this指向的render中this App实例对象；
                        alert(this.name)
                    }}>点我一下你试试</button>
                    <button onClick={this.getAge}>获取年龄</button>
                    <button onClick={()=>this.getAge(this.name)}>获取年龄1</button>
                    <button onClick={this.getSex}>获取性别</button>
                </div>
            )
        }
        say(){
            return '好好学习天天向上'
        }
        getAge(name){
            console.log("点我啦")
            console.log(name)
            console.log(this)
        }
        getSex=()=>{
            console.log(this)
        }
    }

    ReactDOM.render(<App/>,document.getElementById("root"))

 

/* 
 this指向：
 普通函数 谁调用它this就指向谁
 箭头函数 没有this执行，它的this指向指向的父级非箭头函数的this指向 
 构造函数中this指向的是构造出来的新的实例对象

*/
</script>
</html>